<template>
  <div class="home-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>待办事项</span>
            </div>
          </template>
          <div class="stat-value">{{ pendingTasks }}</div>
          <div class="stat-label">需要处理的任务</div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>进行中的流程</span>
            </div>
          </template>
          <div class="stat-value">{{ activeWorkflows }}</div>
          <div class="stat-label">正在处理的流程</div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>已完成流程</span>
            </div>
          </template>
          <div class="stat-value">{{ completedWorkflows }}</div>
          <div class="stat-label">已完成的流程</div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>最近流程</span>
            </div>
          </template>
          <el-table :data="recentWorkflows" style="width: 100%">
            <el-table-column prop="type" label="类型" width="120" />
            <el-table-column prop="status" label="状态" width="120">
              <template #default="scope">
                <el-tag :type="getStatusType(scope.row.status)">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="created_at" label="创建时间" />
          </el-table>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>待办任务</span>
            </div>
          </template>
          <el-table :data="recentTasks" style="width: 100%">
            <el-table-column prop="workflow_type" label="流程类型" width="120" />
            <el-table-column prop="task_name" label="任务名称" width="150" />
            <el-table-column prop="created_at" label="创建时间" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const pendingTasks = ref(0)
const activeWorkflows = ref(0)
const completedWorkflows = ref(0)
const recentWorkflows = ref([])
const recentTasks = ref([])

const getStatusType = (status) => {
  const types = {
    'pending': 'warning',
    'completed': 'success',
    'rejected': 'danger'
  }
  return types[status] || 'info'
}

const fetchDashboardData = async () => {
  try {
    const [tasksRes, workflowsRes] = await Promise.all([
      axios.get('/tasks'),
      axios.get('/workflow/instances')
    ])
    
    pendingTasks.value = tasksRes.data.filter(t => t.status === 'pending').length
    activeWorkflows.value = workflowsRes.data.filter(w => w.status === 'pending').length
    completedWorkflows.value = workflowsRes.data.filter(w => w.status === 'completed').length
    
    recentWorkflows.value = workflowsRes.data.slice(0, 5)
    recentTasks.value = tasksRes.data.filter(t => t.status === 'pending').slice(0, 5)
  } catch (error) {
    console.error('获取仪表盘数据失败:', error)
  }
}

onMounted(() => {
  fetchDashboardData()
})
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.stat-card {
  text-align: center;
}

.stat-value {
  font-size: 36px;
  font-weight: bold;
  color: #409EFF;
  margin: 20px 0;
}

.stat-label {
  color: #909399;
  font-size: 14px;
}

.chart-row {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 